@import '../../style/themes';
@import '../../style/mixins';

@mixin checkbox {
  &-group {
    display: inline-flex;
    flex-wrap: wrap;

    &-vertical {
      flex-direction: column;
    }
  }

  @include reset-component();

  display: inline-flex;
  align-items: center;
  margin-right: $margin-sm;
  white-space: nowrap;
  cursor: default;

  &-disabled {
    opacity: 0.6;
    filter: grayscale(100%);
    pointer-events: none;
  }

  &-focused {
    // outline: 2px further($gray, 8) solid;
  }

  &_input {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
  }

  &_dot {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border: 2px rgba($bg-inverse, 0.8) solid;
    box-sizing: border-box;
    transform: translateZ(0);
  }

  &_label {
    display: inline-block;
    padding: 0 $padding-xs;
  }

  &_dot {
    &::after {
      content: '\a0';
      visibility: hidden;
    }
  }
  &-checked &_dot {
    border-color: $primary-color;
    &::after {
      visibility: unset;
    }
  }
}

.x-checkbox {
  @include checkbox();

  &:hover &_dot {
    border-color: $bg-inverse;
  }
  &:active &_dot {
    border-color: rgba($bg-inverse, 0.6);
    background: rgba($bg-inverse, 0.6);
    filter: grayscale(100%);
  }

  &_dot {
    font-size: 1.3em;
    color: #fff;
    &::after {
      content: '✔';
    }
  }
  &-checked &_dot {
    border: 0;
    background: $primary-color;
  }
}
